<template>
  <div class="register-container">
    <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form" auto-complete="on" label-position="left">
      <div class="common-title"><h2>用户注册</h2></div>
      <el-steps :active="currentStep" align-center class="common-step">
        <el-step title="验证手机号" />
        <el-step title="设置身份" />
        <el-step title="设置密码" />
        <el-step title="重置成功" />
      </el-steps>
      <div class="form-container">
        <template v-if="currentStep===1">
          <el-form-item prop="mobile">
            <el-input ref="mobile" v-model="registerForm.mobile" :disabled="mobileDisabled" placeholder="请输入手机号" maxlength="11" show-word-limit type="text" auto-complete="on" />
          </el-form-item>
          <el-form-item prop="verificationCode">
            <verification-code
              ref="verificationCode"
              v-model="registerForm.verificationCode"
              :code-device="registerForm.mobile"
              :height="40"
              :check="false"
              @checkCode="handleCheckCode" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleNext(1)">确定</el-button>
          </el-form-item>
        </template>
        <template v-if="currentStep===2">
          <el-form-item label="用户名:">
            {{ registerForm.mobile }}
          </el-form-item>
          <el-form-item label="姓名:" prop="realName">
            <el-input v-model="registerForm.realName" maxlength="10" show-word-limit placeholder="请输入姓名" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleNext(2)">确定</el-button>
          </el-form-item>
        </template>
        <template v-if="currentStep===3">
          <el-form-item prop="password">
            <password-level v-model="registerForm.password" placeholder="请输入密码" />
            <div class="common-tips">请设置8-16位密码,建议至少包含数字、大小写字母和特殊符号三种类型</div>
          </el-form-item>
          <el-form-item prop="passwordAgain">
            <el-input v-model="registerForm.passwordAgain" show-password type="password" maxlength="60" show-word-limit autocomplete="off" placeholder="请再次输入密码" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleNext(3)">确定</el-button>
          </el-form-item>
        </template>
        <template v-if="currentStep===4">
          <el-form-item class="tc">
            <div style="font-size:15px;font-weight:bold">注册成功！</div>
            <div class="common-tips">3s后返回登录界面! </div>
          </el-form-item>
        </template>

        <el-form-item class="tr">
          <el-link :underline="false" style="color:#606266">已有账号，去 </el-link> <el-link :underline="false" type="primary" @click="handleGo('login')">登录</el-link>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    var checkPasswordAgain = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('密码确认不能为空!'))
      }
      if (value !== this.registerForm.password) {
        return callback(new Error('两次输入的密码不一致!'))
      }
      return callback()
    }
    return {
      currentStep: 1,
      mobileDisabled: false,
      registerForm: {
        mobile: '',
        verificationCode: '',
        realName: '',
        password: '',
        passwordAgain: ''

      },
      registerRules: {
        mobile: [
          { required: true, trigger: 'blur', message: '请输入手机号' },
          { validator: this.commonValidate.validateMobile, trigger: 'blur' }
        ],
        verificationCode: [
          { required: true, trigger: 'blur', message: '请输入验证码' }
        ],
        realName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
          { validator: this.commonValidate.validateRealName, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: this.commonValidate.validatePassword, trigger: 'blur' }
        ],
        passwordAgain: [
          { required: true, validator: checkPasswordAgain, trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    'registerForm.mobile': function(val) {
      this.checkMobile()
    }
  },
  created() {
    this.mobileDisabled = false
  },
  destroyed() {
  },
  methods: {
    handleGo(url) {
      this.$router.push({ path: '/' + url })
    },
    resetForm() {
      this.mobileDisabled = false
      this.registerForm = {
        mobile: '',
        verificationCode: '',
        realName: '',
        password: '',
        passwordAgain: ''
      }
    },
    handleNext(step) {
      if (step === 0) {
        this.currentStep = 1
        this.resetForm()
      }
      this.$refs['registerForm'].validate(valid => {
        if (valid) {
          if (step === 1) {
            this.currentStep = step + 1
          }
          if (step === 2) {
            this.currentStep = step + 1
          }
          if (step === 3) {
            this.registerUser()
          }
        }
      })
    },
    handleCheckCode(val) {
      if (val) {
        this.handleNext(1)
      }
    },
    checkMobile() {
      if (!this.registerForm.mobile) {
        return
      }
      this.commonValidate.validateMobile(null, this.registerForm.mobile, (validate) => {
        if (!validate) {
          this.$store.dispatch('userValidateExistByField', { field: 'mobile', value: this.registerForm.mobile }).then(response => {
            if (response) {
              this.mobileDisabled = false
              this.resetForm()
              this.msgWarning('手机号已注册,请重新输入！')
            } else {
              this.mobileDisabled = true
            }
          }).catch((_) => {
            this.mobileDisabled = false
            this.resetForm()
          })
        }
      })
    },
    registerUser() {
      this.$refs['registerForm'].validate(valid => {
        if (valid) {
          this.$store.dispatch('userRegister', this.registerForm).then(response => {
            this.msgSuccess('用户注册成功')
            this.currentStep = 4
            this.$alert(`您的手机号:${this.registerForm.mobile}，用户名:${this.registerForm.mobile}`, '注册成功', {
              confirmButtonText: '确定',
              callback: action => {
                this.$router.push({ path: '/login' })
              }
            })
          }).catch(() => {
            this.$refs.verificationCode.getCaptchaCode()
            this.resetForm()
          })
        }
      })
    }
  }
}
</script>
<style lang="scss">
.register-container {
  .el-form-item {
    padding: 0 20px;
    margin-bottom: 11px;
    .el-form-item__label{
      color: #858585;
      font-weight: normal;
    }
  }
  .el-input {
    input {
      height: 40px;
      border-radius: 2px;
    }
  }
}
</style>
<style lang="scss" scoped>
.register-container {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 740px;
  margin: 0 auto;
  .register-form {
    padding: 0px 25px 5px 25px;
    width: 100%;
    background: #ffffff;
    border-radius: 8px;
    position: relative;
    .form-container{
      width: 490px;
      margin: 90px auto ;
    }
  }
  .el-button{
    height: 40px;
    width: 100%;
  }

}
</style>
